<template>
    <div style="padding: 10px 0px;">
            <p style="font-size: 13px; color: #AAAAAA; margin-bottom: 10px;">从下面我的试卷中选择考试的内容</p>
            <el-input v-model="testPaperName" placeholder="搜索" style="width: 200px;"></el-input>
        </div>
        <el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="clazzes"   
			 	style="width: 100%;" 
                size="small"
				:row-key="getRowKeys"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" :reserve-selection="true"
                 :selectable="selectHandle"/>
				<el-table-column  prop="clazz" label="班级"  align="center"></el-table-column>
				<el-table-column prop="studentsNumber" label="学生人数" align="center">
				</el-table-column>
                <el-table-column  prop="state" label="状态"  align="center" >
					<template #default="scope">
						<el-switch v-model="scope.row.state" 
						active-value="启用"
      					inactive-value="禁用"
						style="--el-switch-on-color: #64BD63; --el-switch-off-color: #ff4949"
						disabled
						/>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:small="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
</template>

<script setup>
import {ref,reactive,toRefs,watch, nextTick}  from 'vue'
import {getClazzes} from '../../../api/exam.js'

const  multipleSelection=ref([])
const props = defineProps({
    classes:Object
}) 
const {classes} = toRefs(props)

const emit = defineEmits(['update:classes'])

//记录选中的行
const getRowKeys = (row)=>{
  return row.id
}
//选择班级的弹窗
const clazzes = ref([])
//分页字体
const small = ref(true)
//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const getData=()=>{
	getClazzes({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        clazzes.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
}
getData()
//多选框权限
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value,"班级被选中的》》")
  emit('update:classes',multipleSelection.value)
}

// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	// console.log(val,"==")
	// console.log(query.pageSize)
	getData()
};
const selectHandle=(row,index)=>{
	return row.state=='启用'
}
//监听classes的数据数据变化 回显数据
watch(()=>props.classes,(val)=>{
    console.log("props:",props,'val=',val,"班级数据的变化") 
	const idList = val.map(e=>e.id)
	console.log("idList",idList)
	console.log(clazzes.value)
	
	clazzes.value.forEach(row => {
		if(!idList.includes(row.id)){
			multipleTableRef.value.toggleRowSelection(row,false)
		}
	});
},{deep:true})


</script >
<style lang="less" scoped>
</style>